<template>
	<view>
		<swiper indicator-dots="true"
			autoplay="true" 
			interval="3000"
			@change="change"
			v-if="topTemp.length !== 0">
			<!-- 可以通过这种方式来判断空-->
			<!-- v-if="Object.keys(topTemp).length !==0" -->
			<swiper-item v-for="(item,index) in topTemp" :key="index" @click="toDetails(item)">
				<image mode="aspectFill" :src="item.url"></image>
				<text>{{item.content}}</text>
			</swiper-item>
		</swiper>
		
		<view>
			<text>趣图</text>
			<text @click="toList('pic')" style="float: right;padding:10upx;">更多></text>
		</view>
		
		<scroll-view :scroll-x="true" style="white-space: nowrap;" v-if="midTemp.length !== 0">
			<view v-for="(item,index) in midTemp" :key="index" 
			class="mid" @click="toDetails(item)">
				<image mode="center"  :src="item.url" ></image>
				<!-- <text>{{item.content}}</text> -->
			</view>
		</scroll-view>
		
		<view>
			<text>笑话</text>
			<text @click="toList('text')" style="float: right;padding:10upx;">更多></text>
		</view>
		
		<scroll-view :scroll-y="true" style="white-space: nowrap;" v-if="botTemp.length !== 0">
			<view v-for="(item,index) in botTemp" :key="index" 
			class="bot" @click="toDetails(item)">
				<text>{{item.content}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getJoke,getJokeRand} from "../../api/book.js"
	
	export default {
		data() {
			return {
				params:{
					key:"fd222fe687e3a416c0e6161449fac2f8"
					},
				typeList:[],
				topTemp:[],
				midTemp:[],
				botTemp:[]
				// url:this.$store.state.image
			}
		},
		// computed:{
		// 	topTemp(){
		// 		return this.typeList.slice(0,5)
		// 	},
		// 	midTemp(){
		// 		return this.typeList.slice(0,10)
		// 	},
		// },
		onLoad(){
			// 通过这种方法可以将多个异步请求同时调用，并且按调用时的排序返回参数
			Promise.all([
				getJokeRand({type:"pic",pagesize:"5"}),
				getJoke({type:"pic",pagesize:"5"}),
				getJoke({type:"text",pagesize:"5"}),
			]).then((res)=>{
				let rel = []
				res.map((item)=>{
					rel.push(item[1].data.data)
				})
				console.log(rel)
				
				this.topTemp = rel[0];
				this.midTemp = rel[1];
				this.botTemp = rel[2];
			})
			// getJoke(this.params).then(res=>{
			// 	// console.log(res)
			// 	// 数组解构的工作原理与对象解构几乎相同，但使用方括号而不是花括号
			// 	let [error, rlt] = res
			// 	console.log(rlt.data.data)
			// 	this.typeList = rlt.data.data
			// });
		},
		
		methods: {
			change(e){
				console.log(e.target.current)
			},
			toList(type){
				uni.navigateTo({
					url:"../list/list?type="+type
				})
			},
			toDetails(item){
				// 通过这种方法传值解决参数过长的问题
				uni.navigateTo({
					url:"../details/details?item=" + encodeURIComponent(JSON.stringify(item))
				})
				
			}
		}
	}
</script>

<style lang="scss">
	
.mid{
	display:inline-block;
	width: 100upx;
	height: 200upx;
	margin: 10px;
	padding: 10px;
	image{
		width: 100upx;
		height: 200upx;
	}
}
.bot{
	margin: 10px;
	padding: 10px;
	background-color: #3F536E;
	text{
		font-size: 14px;
	}
}
</style>
